<template>
    <div>
        <h2>服务规格</h2>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['mini:standards:add']">新增</el-button>
            </el-col>
        </el-row>
        <el-table :data="standards">
            <el-table-column label="编号" align="center" prop="serviceStandardsId" width="50">
                <template slot-scope="scope">
                    <div>{{ scope.$index + 1 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="规格图" align="center" width="150">
                <template slot-scope="scope">
                    <el-image v-if="scope.row.standardsImg" style="width: 80px; height: 80px"
                        :src="baseUrl + scope.row.standardsImg" fit="fit"></el-image>
                    <div class="image-none" v-else>无</div>
                </template>
            </el-table-column>
            <el-table-column label="规格名" align="center" key="standardsName" prop="standardsName"
                :show-overflow-tooltip="true" />
            <el-table-column label="含服务次数" align="center" key="number" prop="number" :show-overflow-tooltip="true" />

            <el-table-column label="单价" align="center" key="standardsOriginalPrice" prop="standardsOriginalPrice"
                :show-overflow-tooltip="true" width="80" />
            <el-table-column label="折扣" align="center" key="depositRate" prop="depositRate" :show-overflow-tooltip="true"
                width="80" />
            <el-table-column label="介绍" align="center" key="standardsTips" prop="standardsTips" width="120" />
            <el-table-column label="单位" align="center" key="standardsUnit" prop="standardsUnit" width="50" />
            <el-table-column label="多选" align="center" key="multiple" width="50">
                <template slot-scope="scope">
                    {{ scope.row.multiple > 0 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column label="版本号" align="center" key="standardsVersion" prop="standardsVersion" width="100" />
            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                <template slot-scope="scope" v-if="scope.row.userId !== 1">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['mini:standards:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['mini:standards:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或修改服务规格对话框 -->
        <el-dialog title="服务规格" :visible.sync="standardsDialog.open" width="600px" append-to-body>
            <el-form ref="standardsForm" :model="standardsForm" label-width="100px" :rules="standardsDialog.rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="规格名" prop="standardsName">
                            <el-input v-model="standardsForm.standardsName" placeholder="请输入规格名" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="规格图" prop="standardsImg">
                            <div style="display: flex;">
                                <el-upload class="avatar-uploader" :http-request="handleUpload" action="uploadUrl"
                                    :show-file-list="false">
                                    <el-image v-if="standardsForm.standardsImg"
                                        style="width: 100px; height: 100px;background-color: #f2f2f2;"
                                        :src="baseUrl + standardsForm.standardsImg" fit="contain" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"></i>
                                </el-upload>
                                <span v-show="standardsForm.standardsImg" @click=handleStandardsImgRemove()>
                                    <span class="el-upload-list__item-preview">
                                        <i class="el-icon-circle-close" style="font-size: 20px;"></i>
                                    </span>
                                </span>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单价" prop="standardsOriginalPrice">
                            <el-input type="number" v-model="standardsForm.standardsOriginalPrice" placeholder="请输入单价" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="折扣" prop="depositRate">
                            <el-input type="number" v-model="standardsForm.depositRate" placeholder="请输入折扣（默认为0）" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="含服务次数" prop="number">
                            <el-input type="number" v-model="standardsForm.number" placeholder="含服务次数" value="1" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="介绍" prop="standardsTips">
                            <el-input v-model="standardsForm.standardsTips" placeholder="请输入介绍" maxlength="30" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位">
                            <el-input v-model="standardsForm.standardsUnit" placeholder="请输入单位" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="多购">
                            <el-switch v-model="standardsForm.multiple" :active-value=1 :inactive-value=0></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="使用输入框">
                            <el-switch v-model="standardsForm.inputFormEnable" :active-value=true
                                :inactive-value=false></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-show="standardsForm.inputFormEnable">
                    <el-row class="inputItem" v-for="(item, index) in standardsForm.inputForm" :key="index">
                        <div class="inputItem-header">
                            <div class="inputItem-label">项{{ index + 1 }}</div>
                            <div class="inputItem-remove" @click="removeInputItem(index)">
                                <i class="el-icon-close"></i>
                            </div>
                        </div>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="输入项">
                                    <el-input v-model="item.label" placeholder="请输入名称" maxlength="30" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否必填">
                                    <el-switch v-model="item.required" :active-value=1 :inactive-value=0></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="最大值">
                                    <el-input type="number" v-model="item.numMax" placeholder="请输入最大值" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="最小值">
                                    <el-input type="number" v-model="item.numMin" placeholder="请输入最小值" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="单价">
                                    <el-input type="number" v-model="item.price" placeholder="请输入单价" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="单位">
                                    <el-input v-model="item.unit" placeholder="请输入单位" maxlength="30" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-row>
                    <div class="inputItem-add">
                        <el-button type="primary" icon="el-icon-plus" circle @click="insertInputItem"></el-button>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addStandards, deleteStandards, updateStandards } from '@/api/miniprogram/service'
import { uploadImgToCloud, uploadImgPre } from "@/api/menu";
import { getToken } from "@/utils/auth";
export default {
    name: "Standards",
    props: {
        standardsList: {
            type: Array
        },
        serviceId: {
            type: Number
        },
        submitStand: Function
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_IMG_BASE_URL,
            //服务规格
            standards: this.standardsList,
            standardsForm: {},
            //规格dialog框
            standardsDialog: {
                open: false,//弹窗显示控制
                oldMenu: {},
                rules: { //服务菜单校验规则
                    standardsName: [
                        { required: true, message: "请输入规格名称" }
                    ],
                    standardsOriginalPrice: [
                        { required: true, message: "请输入单价" }
                    ],
                    menuName: [
                        { required: true, message: "菜单名称不能为空" },
                        { min: 2, max: 20, message: '菜单名称长度介于2到20字符之间' }
                    ]
                }
            },
            //表单输入模版
            inputItem: {
                label: null,//名称
                numMax: 0,//最大值
                numMin: 0,//最小值
                price: 0,//单价
                required: 0,//必填
                unit: null//单位
            },
            // 遮罩层
            loading: false,
        }
    },
    methods: {
        //修改按钮
        handleUpdate(row) {
            let standardsForm = JSON.parse(JSON.stringify(row));
            if (standardsForm.inputForm && standardsForm.inputForm.length > 0) {
                standardsForm.inputFormEnable = true;
            }
            this.standardsForm = standardsForm;
            this.standardsDialog.open = true;
        },
        //删除按钮
        handleDelete(row) {
            const serviceStandardsId = row.serviceStandardsId;
            this.$modal.confirm('是否确认删除编号为"' + serviceStandardsId + '"的数据项？').then(function () {
                return deleteStandards(serviceStandardsId);
            }).then(() => {
                this.submitStand();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.resetStandards();
            this.standardsDialog.open = true;
        },
        /** 提交按钮 */
        submitForm: function () {
            this.standardsForm.depositRate = this.standardsForm.depositRate || 0;
            this.standardsForm.discount = this.standardsForm.depositRate === 0 ? 0 : 1;
            if (this.standardsForm.serviceStandardsId != undefined) {
                updateStandards(this.standardsForm).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.standardsDialog.open = false;
                    this.submitStand();
                });
            } else {
                addStandards(this.standardsForm).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.standardsDialog.open = false;
                    this.submitStand();
                });
            }
        },
        //取消按钮
        cancel() {
            this.standardsDialog.open = false;
        },
        //规格默认处理
        resetStandards() {
            this.standardsForm = {
                serviceStandardsId: undefined,
                serviceId: this.serviceId,
                standardsImg: undefined,
                standardsName: undefined,
                standardsOriginalPrice: undefined,
                standardsTips: undefined,
                standardsUnit: undefined,
                number: 1,
                multiple: 1,
                discount: 0,
                depositRate: 0,
                inputForm: undefined,

                inputFormEnable: false,//输入表单启用
            }
        },
        handleStandardsImgRemove() {
            this.standardsForm.standardsImg = "";
        },
        handleUpload(httpParams) {
            this.loading = true;
            uploadImgPre(httpParams.file.name, "standardsImg").then(res => {
                uploadImgToCloud(res.data, httpParams.file).then(result => {
                    console.log(result);
                    this.standardsForm.standardsImg = "/" + res.data.key;
                    this.loading = false;
                    this.$modal.msgSuccess("上传成功");
                })
            })
        },
        //移除输入框
        removeInputItem(index) {
            this.standardsForm.inputForm.splice(index, 1);
        },
        //添加输入框
        insertInputItem() {
            this.standardsForm.inputForm.push({ ...this.inputItem })
        }
    },
    watch: {
        standardsList(e) {
            this.standards = e;
        },
        "standardsForm.inputFormEnable"(e) {
            if (e && !this.standardsForm.inputForm) {
                this.standardsForm.inputForm = [{ ...this.inputItem }];
            }
            if (!e) {
                this.standardsForm.inputForm = null;
            }
        }
    }
}
</script>
<style scoped>
.inputItem {
    border: 2px solid black;
    padding: 10px;
    border-style: outset inset inset outset;
    margin-bottom: 5px;
}

.inputItem-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 20px;
}

.inputItem-remove {
    font-size: 20px;
    transition: font-size .2s, transform .2s;
}

.inputItem-remove:hover {
    color: red;
    font-size: 25px;
    transform: rotate(90deg);
}

.inputItem-add {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}
</style>